import { Tooltip } from 'antd'

## 使用を開始#start-using
import mpPanelImg from '@/assets/image/screenshot/mp-panel.png'

### ステップ 1#step-1

プロジェクトに依存関係をインストールします。複数のミニプログラムプラットフォームのSDKを提供していますので、必要に応じてインストールしてください：

:::code-group

```bash wechat
yarn add @huolala-tech/page-spy-wechat@latest
```

```bash alipay
yarn add @huolala-tech/page-spy-alipay@latest
```

```bash uniapp
yarn add @huolala-tech/page-spy-uniapp@latest
```

```bash taro
yarn add @huolala-tech/page-spy-taro@latest
```

:::


### ステップ 2#step-2

PageSpyサービスのドメインをミニプログラムのHTTP、WebSocketリクエストのホワイトリストに追加します。注意：開発環境を除き、ミニプログラムはHTTPSとWSSプロトコルの使用が必須です：

```
https://<your-pagespy-host>
wss://<your-pagespy-host>
```

### ステップ 3#step-3

エントリーファイルでSDKをインポートしてインスタンス化します。[設定オプション]({VITE_SDK_WECHAT_REPO})を使用してSDKの動作をカスタマイズできます：

:::code-group

```js wechat
import PageSpy from '@huolala-tech/page-spy-wechat';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js alipay
import PageSpy from '@huolala-tech/page-spy-alipay';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js uniapp
import PageSpy from '@huolala-tech/page-spy-uniapp';

const $pageSpy = new PageSpy({
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

```js taro
import PageSpy from '@huolala-tech/page-spy-taro';
import Taro from '@tarojs/taro';

const $pageSpy = new PageSpy({
  taro: Taro,
  api: "{deployPath}",
  enableSSL: {enableSSL},
})
```

:::

## デバッグメニュー#menus

作成したPageSpyインスタンスで`showPanel()`メソッドを呼び出すと、デバッグを補助するためのデバッグメニューがポップアップ表示されます：

<a href={mpPanelImg} target="_blank">
  <img src={mpPanelImg} style={{ maxWidth: 320 }} />
</a>

以上がミニプログラムプロジェクトにPageSpyを導入する全手順です。導入完了後、トップメニューの<Tooltip title="メニューはデフォルトで非表示、デプロイ後に表示されます" color="purple"><a href="javascript:void(0)">デバッグを開始</a></Tooltip>をクリックして使用開始！
